<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <!-- 
        vue是一个渐进式框架 ,只关注视图层，主要使用的声明式渲染（编程） 动态的构建用户界面
        vue.js（需要引入一个vue.js）
        vue不支持ie8及以下版本
        遵循的开发模式：MVVM
        M  model
        vm ViewModel 
        v  view

     -->
     <div class="box">
         <!-- Mustache  双大括号  变量 表达式
            不能写语句  
        -->
        <h1>{{msg}}</h1>
        <!--三元表达式  -->
        <h1>{{num<4?msg:'帅奇欢迎你！！'}}</h1>
        <h1>{{str.toUpperCase()}}</h1>
        <!-- 称之为表达式 -->

        <!-- 什么是语句 -->
        <!-- <h1>{{const obj = 123;}}</h1> -->
     </div>
     <div class="box1">
         <h1>{{msg}}</h1>
     </div>
     <script>
        //  Vue是一个构造函数  new Vue  vm
        // vm是Vue的实例对象 instanceof 判断一个对象是否是另一个构造函数的实例对象
        // 语法： 实例对象 instanceof 构造函数

        // {key:value,key:value}
        // key永远是字符串   value可以是任意值
         const vm = new Vue({//配置对象
            el:'.box',//在哪个元素中使用vue语法，选择器
            data:{
                msg:'涵涵困了吗？',//数据
                num:2,
                str:'fgyuiojk;'

            }
         });

         console.log(vm);
         console.log(vm.msg);
         console.log(vm._data.msg);
         console.log(vm.$data.msg);
         console.log(vm.$root.$data.msg);
         console.log(vm.$el);

         /* 初始值
         只要在模板中使用的值，必须在data当中有初始值
         str:''
         num:0
         beal:true/false
         arr:[]
         obj:{}
         err:null
         */

        console.log(vm instanceof Vue);
        const vm1 = new Vue({
            el:'.box1',
            data:{
                msg:'困得往后站！！'
            }
        })
        // 一个页面上可以写多个vue实例
     </script>
</body>
</html>